<template>
  <div class="zy-content">
    <div class="searchBox search-box-layout">
      <search :columns="searchData" @getSearch="getSearch(arguments)"/>
    </div>
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>
        <Button @click="handleAdd">
          新增
        </Button>
        <!-- <Button @click="handleImportData">
            批量导入
        </Button> -->
        <Button @click="downloadTemplate">
          导出
        </Button>
      </div>
      <div class="tableContent" :style="{ height: tableHeight + 'px' }">
        <Table ref="selection" :columns="columns" border :data="list" :height="tableHeight">

          <template slot="action" slot-scope="{ row }">
            <span class="operationBtn" @click="handleEditRow(row)"><i
                class="iconfont zy-common-bianji"
            />编辑</span>

            <span class="operationBtn" @click="handleDeleteRow(row)"><i
                class="iconfont zy-common-shanchu"
            />删除</span>
          </template>
        </Table>
      </div>
      <!--      <div class="pageWrap mt16">-->
      <!--        <pageLeftTitle :total="total" />-->
      <!--        <Page-->
      <!--          :total="total"-->
      <!--          :page-size="params.pageSize"-->
      <!--          :current="params.current"-->
      <!--          show-sizer-->
      <!--          @on-change="changePageNum"-->
      <!--          @on-page-size-change="changePageSize"-->
      <!--        />-->
      <!--      </div>-->
    </div>

    <Modal v-model="deleteShow" :mask-closable="false" title="删除" class="modal-title-layout">
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"/>
      </div>
      <p class="title">
        <span>是否确认删除?</span>
      </p>
      <div slot="footer">

        <Button type="default" @click="deleteShow = false">取消</Button>
        <Button type="primary" @click="handleDeleteSure">确定</Button>
      </div>
    </Modal>

    <CreateOrUpdateModal
        :visible="createStatus"
        :form="form"
        :title="form.id ? '编辑' : '新增'"
        :handle-add-submit="handleAddSubmit"
        :close-submit="closeSubmit"
        :dic-data="dicData"
    />
    <importExcelModal
        v-if="importExcelState"
        :import-excel-state-f="importExcelState"
        @importExcelChange="importExcelChange"
    />
  </div>
</template>

<script>
import ImportExcelModal from '@/components/importExcel.vue'
import fileDownload from 'js-file-download'
import search from '@/components/curd/searchList.vue'
import toggleTableOperation from '@/mixins/toggleTableOperation'
import CreateOrUpdateModal from './modal_open.vue'

export default {
  name: 'ListVue',
  components: {ImportExcelModal, search, CreateOrUpdateModal},
  mixins: [toggleTableOperation],
  data() {
    return {
      params: {
        pageSize: 20,
        current: 1
      },
      searchData: [
        {
          title: '物料类型',
          key: 'materialType'

        },
        {
          title: '物料名称',
          key: 'materialName'
        }

      ],
      columns: [
     
        {
          title: '物料名称',
          key: 'materialName',
          align: 'center',
          minWidth: 100,
          resizable: true
        },      {
          title: '物料编码',
          key: 'materialNo',
          align: 'center',
          minWidth: 100,
          resizable: true
        },  {
          title: '物料类型',
          key: 'materialType',
          align: 'center',
          minWidth: 100,
          resizable: true
        }, {
          title: '物料属性',
          key: 'materialProperties',
          align: 'center',
          minWidth: 100,
          resizable: true
        }, {
          title: '基本单位',
          key: 'basicUnit',
          align: 'center',
          minWidth: 100,
          resizable: true
        }, {
          title: '单位换算率',
          key: 'conversionUnit',
          align: 'center',
          minWidth: 140,
          resizable: true
        },  {
          title: '重量个数转换比',
          key: 'weightNumConvert',
          align: 'center',
          minWidth: 140,
          resizable: true
        }, 
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 180,
          align: 'center'
        }
      ],
      importExcelState: false,
      list: [],
      total: 0,
      deleteShow: false,
      currentItem: {},
      createStatus: false,
      form: {},
      nameList: [],
      searchParams: {},
      dicData: [
        {label: '是', value: 1},
        {label: '否', value: 0}
      ]
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 400
    }
  },

  mounted() {
    this.getList()
  },
  methods: {
    closeSubmit() {
      this.createStatus = false
    },
    getSearch(arg) {
      this.searchParams = arg[0] || {}
      this.getList()
    },
    handleRemote(query) {
      if (query) {
        this.axios.get('/dms/dict/nameList', {params: {name: query}})
            .then(res => {
              if (res.code === 200) {
                this.nameList = res.data
              } else {
                this.$Message.warning(res.msg)
              }
            })
      }
    },
    importExcelChange(val) {
      this.importExcelState = false
      if (val === 'success') {
        this.$Message.success('导入成功!')
        this.changeNum()
      }
    },
    async getList() {
      try {
        const response = await this.axios.post('/api/basedataMaterial/getPage', {...this.params, ...this.searchParams})
        if (response.code === 200) {
          console.log(response.data, 'response.data.records')
          this.list = response.data.records
          this.total = response.data.total
        } else {
          this.$Message.warning(response.msg)
        }
      } catch (error) {
        console.error(error)
        this.$Message.error('获取列表失败')
      }
    },
    reset() {
      this.params = {pageSize: 20, current: 1}
      this.getList()
    },
    changeNum() {
      this.params.current = 1
      this.params.pageSize = 20
      this.getList()
    },
    handleAdd() {
      this.form = {}
      this.createStatus = true
    },
    downloadTemplate() {
      const filName = '物料管理导出文档'
      this.axios.get('/api/basedataMaterial/exportExcel', {
        responseType: 'blob'

      })
          .then(res => {
            if (res.code === 200) {
              fileDownload(res, `${filName}.xlsx`)
            } else {
              this.$Message.warning('导出失败')
            }
          })
    },
    handleImportData() {
      this.importExcelState = true
    },
    handleAddSubmit() {
      if (this.form.id) {
        this.axios.put('/api/basedataMaterial/update', this.form)
            .then(res => {
              this.currentItem = {}
              this.createStatus = false
              this.getList()
            })
            .catch(error => {
              console.error('Error submitting form:', error)
            })
      } else {
        this.axios.post('/api/basedataMaterial/save', this.form)
            .then(res => {
              this.currentItem = {}
              this.createStatus = false
              this.getList()
            })
            .catch(error => {
              console.error('Error submitting form:', error)
            })
      }
    },
    handleEditRow(row) {
      this.form = {
        ...row,
        inventoryStatus: row.inventoryStatus ? 1 : 0,
        exemptionStatus: row.exemptionStatus ? 1 : 0
      }
      this.createStatus = true
    },
    handleDeleteRow(row) {
      this.currentItem = row
      this.deleteShow = true
    },
    handleDeleteSure() {
      this.axios({
        method: 'DELETE',
        url: '/api/basedataMaterial/delete',
        data: {ids: [this.currentItem.id]}
      }).then(res => {
        if (res.code === 200) {
          this.currentItem = {}
          this.deleteShow = false
          this.getList()
        } else {
          this.$Message.warning(res.message)
        }
      })
    },
    changePageNum(val) {
      this.params.current = val
      this.getList()
    },
    changePageSize(val) {
      this.params.pageSize = val
      this.getList()
    }
  }
}
</script>

<style scoped>
.tableContent {
}
</style>
